<template>
  <div style="height: 90%">
    <ta-layout-header :style="{ background: '#fff', padding: 0 }">
      <ta-breadcrumb style="margin: 1rem 0">
        <ta-breadcrumb-item>
          <span class="title">员工考核</span> 
        </ta-breadcrumb-item>
      </ta-breadcrumb>
    </ta-layout-header>
    <ta-layout-content :style="{ margin: '1.5rem 1rem 0', height: '85%' }">
      <ta-row :style="{ background: '#fff', padding: '24px', height: '100%' }">
        <ta-col :span="3">
          <ta-select
            @change="gradeChange"
            size="large"
            placeholder="评分等级筛选"
            :options="gradeList"
            :allowClear="true"
            style="width: 100%"
          ></ta-select>
        </ta-col>
        <ta-col :span="5" style="margin-left: 2rem">
          <ta-cascader
            :options.sync="departmentList"
            @change="branchChange"
            placeholder="按部门筛选"
            :allowClear="true"
            notFoundContent="暂无筛选选项"
            size="large"
            style="width: 100%"
          />
        </ta-col>
        <ta-col :span="5" style="margin-left: 2rem">
          <ta-input-search
            placeholder="员工姓名搜索"
            @search="nameSearch"
            enterButton
            style="width: 100%;"
            size="large"
          />
        </ta-col>
        <ta-col :span="8" style="margin-left: 2rem">
          <ta-button 
            angle="5px" 
            type="primary" 
            size="large"
            :loading="btnInLoading"
            style="margin: 0 2rem"
          >导入信息</ta-button>
          <ta-button 
            angle="5px" 
            type="primary" 
            size="large"
            :loading="btnOutLoading"
          >导出信息</ta-button>
        </ta-col>
        <ta-col style="margin-top: 4rem">
          <ta-table
            :columns="tableTitle"
            :dataSource="tableData"
            :loading="tableLoading"
            :rowSelection="rowSelection"
          >
            <ta-table-edit slot="name" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="employeeId" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <template slot="lateNum" slot-scope="text, record">
              <span>{{text}}</span>
            </template>
            <ta-table-edit slot="leaveEarly" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="absenteeism" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="leaveNum" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="attendanceRate" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="logMiss" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <template slot="performance" slot-scope="text, record">
              <ta-rate :defaultValue="text" allowHalf disabled/>
            </template> 
            <ta-table-edit slot="fineCount" slot-scope="text, record" type="input" @change="changeData" :row-editable="false"></ta-table-edit>
            <ta-table-edit slot="totleGrade" slot-scope="text, record" type="select" :option="gradeList" @change="changeData" :row-editable="false"></ta-table-edit>
            <template slot="operate " slot-scope="text, record">
              <ta-button @click="showOperate(record)" type="primary">查看详情</ta-button>
            </template> 
          </ta-table>
        </ta-col>
        <ta-col style="margin-top: 2rem">
          <ta-pagination
            style="float: right;"
            :dataSource.sync="tableData"
            :defaultPageSize="10"
            :pageSizeOptions="['5','10','20']"
            :params="userPageParams"
            size="large"
          />
        </ta-col>

        <ta-modal
          title="详细信息"
          v-model="visible"
          height="300px"
          @ok="visible = false"
        >
          <ta-table
            :columns="lateColumns"
            :dataSource="lateData"
          >
            <ta-table-edit slot="clockDate" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="clockType" slot-scope="text, record" type="select" @change="changeData" :option="typeList" :row-editable="false"></ta-table-edit>
            <ta-table-edit slot="clockTime" slot-scope="text, record" type="input" @change="changeData" :row-editable="false"></ta-table-edit>
            <span slot="operate" slot-scope="text, record">
              <ta-table-operate :operateMenu="operateMenu" :record="record"></ta-table-operate>
            </span>
          </ta-table>
        </ta-modal>
      </ta-row>
    </ta-layout-content>
  </div>
</template>

<script>
const tableTitle = [
  {title: '姓名',dataIndex: 'name', scopedSlots: {customRender: 'name'}},
  {title: '员工编号', dataIndex: 'employeeId', scopedSlots: {customRender: 'employeeId'}},
  {title: '迟到工时(小时)', dataIndex: 'lateNum', scopedSlots: {customRender: 'lateNum'}},
  {title: '早退工时(小时)', dataIndex: 'leaveEarly', scopedSlots: {customRender: 'leaveEarly'}},
  {title: '旷工次数(天)', dataIndex: 'absenteeism', scopedSlots: {customRender: 'absenteeism'}},
  {title: '请假工时(小时)', dataIndex: 'leaveNum', scopedSlots: {customRender: 'leaveNum'}},
  {title: '出勤率', dataIndex: 'attendanceRate', scopedSlots: {customRender: 'attendanceRate'}},
  {title: '日志缺失数', dataIndex: 'logMiss', scopedSlots: {customRender: 'logMiss'}},
  {title: '绩效评分', dataIndex: 'performance', scopedSlots: {customRender: 'performance'}},
  {title: '罚款金额', dataIndex: 'fineCount', scopedSlots:{customRender: 'fineCount'}},
  {title: '总评', dataIndex: 'totleGrade', scopedSlots:{customRender: 'totleGrade'}},
  {title: '操作', dataIndex: 'operate ', scopedSlots:{customRender: 'operate '}}
]
const lateColumns = [
  {title: '日期', dataIndex: 'clockDate', scopedSlots: {customRender: 'clockDate'}},
  {title: '类型', dataIndex: 'clockType', scopedSlots: {customRender: 'clockType'}},
  {title: '工时', dataIndex: 'clockTime', scopedSlots: {customRender: 'clockTime'}},
  {title: '操作', dataIndex: 'operate', scopedSlots: {customRender: 'operate'}}
]
export default {
  name: 'clockList',
  data () {
    return {
      tableTitle,
      tableData: [
        {
          name: '张三',
          employeeId: '2019020111',
          lateNum: 0.5,
          leaveEarly: 0,
          absenteeism: 1,
          leaveNum: 3,
          attendanceRate: '95%',
          logMiss: 0,
          performance: 3,
          fineCount: 320,
          totleGrade: '2',
          clockInfo: [
            {clockDate: '2019-08-25 9:30:50', clockType: '0', clockTime: 0.5, key: '1'},
            {clockDate: '2019-08-25 9:30:50', clockType: '1', clockTime: 0.5, key: '2',}
          ]
        },
        {
          key: '2',
          name: '李四',
          employeeId: '2019020111',
          lateNum: 1,
          leaveEarly: 0,
          absenteeism: 1,
          leaveNum: 3,
          attendanceRate: '95%',
          logMiss: 0,
          performance: 3,
          fineCount: 320,
          totleGrade: '2',
          clockInfo: [
            {clockDate: '2019-08-25 9:30:50', clockType: '1', clockTime: 0.5, key: '1'},
            {clockDate: '2019-08-25 9:30:50', clockType: '2', clockTime: 0.5, key: '2'}
          ]
        }
      ],
      typeList:[
        {
          value: '0',
          label: '迟到'
        },
        {
          value: '1',
          label: '早退',
        },
        {
          value: '2',
          label: '旷工'
        },
        {
          value: '3',
          label: '请假'
        }
      ],
      lateColumns,
      lateData: [],
      visible: false,
      operateMenu: [
        {
          name: '删除',
          type: 'delete',
          deleteTitle: '确认删除该信息？',
          onDelete: (record) => {
            this.lateData.forEach((item, index) => {
              if (item.key == record.key) {
                this.lateData.splice(index, 1)
                this.$message.info('删除信息成功')
              }
            })
          }
        }
      ],
      tableLoading: false,
      btnInLoading: false,
      btnOutLoading: false,
      gradeList: [
        {
          value: '0',
          label: '极差'
        },
        {
          value: '1',
          label: '差',
        },
        {
          value: '2',
          label: '合格'
        },
        {
          value: '3',
          label: '良好'
        },
        {
          value: '4',
          label: '优秀'
        }
      ],
      departmentList: [
        {
          value: 'yb',
          label: '医保行业部',
          children: [
            {
              value: 'kf',
              label: '控费产品部',
              children: [
                {
                  value: 'kaifa',
                  label: '开发组'
                }
              ]
            }
          ]
        }
      ],
      rowSelection: {
        selectedRowKeys: [],
        onChange: this.onSelectChange
      }
    }
  },
  mounted () {},
  created () {},
  methods: {
    branchChange (value,selectedOptions) {
      console.log(selectedOptions)
    },
    showOperate (row) {
      this.visible = true
      let data = row.clockInfo
      this.lateData = data
    },
    nameSearch (value) {
      console.log(value)
    },
    gradeChange (value, option) {
      console.log(value)
    },
    changeData ({newData, record, columnKey}) {
      // 将单元格数据修改为新值（newData：返回改变的值、record：该行的行数据、columnKey：该列的key）
      record[columnKey] = newData
    },
    userPageParams () {
      return {}
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 1.125rem;
  display: inline-block;
  margin: 1rem 2rem;
}
</style>